<template>
  <div>
    <el-row>
      <el-button type="primary" @click="addClassify" icon="el-icon-plus">添加分类</el-button>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="classifyId" label="类别ID" width="100" align="center"></el-table-column>
      <el-table-column prop="classifyName" label="分类名称" width="180"></el-table-column>
      <!-- <el-table-column prop="isDelete" label="是否删除" width="100" align="center"></el-table-column> -->
      <el-table-column prop="url" label="图片地址"></el-table-column>
      <el-table-column label="效果图" width="180" align="center">
        <div slot-scope="props">
          <!-- {{ props.row.comment}} -->
          <img width="36" :src="props.row.url" alt />
        </div>
      </el-table-column>
      <el-table-column label="开关" width="180" align="center">
        <el-switch active-color="#13ce66" inactive-color="#ff4949" disabled></el-switch>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出层 -->
    <el-dialog title="添加商品分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="链接地址" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            drag
            action="http://data.youxiu.info/mini-images/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域" style="width:300px">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAdd(booType)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// const API = require("@/utils/api");
import { httpRequest, alertMessage } from "@/utils/api";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      booSwitch: true,
      formLabelWidth: "100px",
      booType: false,
      form: {
        classifyId: null,
        name: "",
        url: ""
      }
    };
  },
  mounted: function() {
    this.loadData();
  },
  methods: {
    // 添加分类
    addClassify: function() {
      this.booType = false;
      this.dialogFormVisible = true;
    },
    // 修改分类
    handleEdit: function(index, data) {
      console.log(index);
      console.log(data);
      console.log("---------------------------");
      this.form = {
        classifyId: data.classifyId,
        name: data.classifyName,
        url: data.url
      };
      this.dialogFormVisible = true;
      this.booType = true;
    },
    // 删除分类
    handleDelete: function(index, data) {
      var _this = this;
      // console.log(index);
      // console.log(data);
      // console.log("---------------------------");
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("div", { style: "text-align: left" }, [
          h("span", null, `您确认删除“${data.classifyName}”此分类项吗？`),
          h(
            "span",
            { style: "color: #F56C6C" },
            `如果删除，此分类下的所有商品也会删除！`
          )
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
        // center: true
      })
        .then(_ => {
          httpRequest("post", "/item/classify005", {
            classifyId: data.classifyId,
            isDelete: 1
          }).then(res => {
            if (res.status == 200) {
              alertMessage(this, "删除成功！", "1");
              _this.loadData();
            } else {
              alertMessage(this, "删除失败，请重试！", "4");
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 添加分类
    onAdd: function(type) {
      if (this.form.name == "") {
        alertMessage(this, "分类名称必填项！", "4");
      } else if (this.form.url == "") {
        alertMessage(this, "链接地址为必填项！", "4");
      }
      let data, _url,_msg;
      if (type) {
        // 修改分类
        // alertMessage(this, "修改分类", "1");
        data = {
          classifyId: this.form.classifyId,
          classifyName: this.form.name,
          url: this.form.url
        };
        _url = "/item/classify004";
        _msg = "修改成功";
        // return false;
      } else {
        // 添加新分类
        // alertMessage(this, "添加分类", "1");
        data = {
          classifyName: this.form.name,
          url: this.form.url
        };
        _url = "/item/classify001";
        _msg = "添加成功";
        // return false;
      }
      httpRequest("post", _url, data).then(res => {
        if (res.status == 200) {
          data.classifyId = this.tableData.length;
          this.tableData.push(data);
          this.dialogFormVisible = false;
          alertMessage(this, _msg, "1");
        } else {
          alertMessage(this, "提交失败请稍后重试！", "4");
        }
      });
    },
    loadData: function() {
      // 导入分类
      httpRequest("post", "/item/classify003", "").then(res => {
        if (res.status == 200) {
          // alertMessage(this, "加载成功", "1");
          this.tableData = res.data.data;
        } else {
          alertMessage(this, "加载失败，请稍后重试！", "4");
        }
      });
    }
  }
};
</script>
<style scoped>
.el-row {
  text-align: left;
  margin-bottom: 15px;
}
</style>